<template>
    <div>
    <div>
        <el-radio-group v-model="size">
            <el-radio label="">默认</el-radio>
            <el-radio label="medium">中等</el-radio>
            <el-radio label="small">小型</el-radio>
            <el-radio label="mini">超小</el-radio>
        </el-radio-group>

        <el-descriptions class="margin-top" :userInfo='userInfo' :column="3" :size="size" border>
            <template slot="extra">
                <el-button type="text" @click='editIcon' size="small">修改头像</el-button>
                <el-button type="text" @click='editNickname' size="small">修改昵称</el-button>
                <el-button type="text" @click='editpw' size="small">重置密码</el-button>
                <el-button type="text" @click='bindPhone' size="small">绑定手机</el-button>
                <el-button type="text" @click='unbindPhone' size="small">解绑手机</el-button>
            </template>

            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-user"></i>
                    用户名
                </template>
                {{ userInfo.username }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-user"></i>
                    昵称
                </template>
                {{ userInfo.nickname }}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    手机号
                </template>
                <span v-if='userInfo.phone == null'>未绑定</span>
                <span v-else>{{ userInfo.phone }}</span>
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-user"></i>
                    积分
                </template>
                {{ userInfo.score }}
            </el-descriptions-item>

            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-user"></i>
                    钱包余额
                </template>
                {{ userInfo.money }}
            </el-descriptions-item>

            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-user"></i>
                    账号创建时间
                </template>
                {{ userInfo.createTime }}
            </el-descriptions-item>

            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-user"></i>
                    用户身份权限
                </template>
                <el-col :span="2" v-for='item in userInfo.roles'><el-tag>{{item}}</el-tag></el-col>
            </el-descriptions-item>


        </el-descriptions>



    </div>

        <el-dialog :title="dialogTitle1" :visible.sync="dialogV1">
            <el-card class="box-card">
                <el-form  ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item v-if="dialogTitle1==='修改昵称'" label="昵称" prop="name">
                        <el-input required='required' type='text' maxlength="32" show-word-limit v-model="nickname"></el-input>
                    </el-form-item>
                    <el-form-item v-else label="头像" prop="name">
                        <el-input placeholder="复制头像连接到此处" required='required' type='text' maxlength="512" show-word-limit v-model="iconUrl"></el-input>
                    </el-form-item>
                </el-form>
            </el-card>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogV1 = false">取 消</el-button>
                <el-button type="primary" @click='updateNickname'>提 交</el-button>
            </div>
        </el-dialog>

        <el-dialog title="重置密码" :visible.sync="resetpwVisible">
            <el-card class="box-card">
                <el-form  ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="原密码" prop="name">
                        <el-input required='required' type='text' maxlength="32" show-word-limit v-model="resetpw.beforePw"></el-input>
                    </el-form-item>

                    <el-form-item label="新密码" prop="name">
                        <el-input required='required' type='text' maxlength="32" show-word-limit v-model="resetpw.nowPw"></el-input>
                    </el-form-item>
                </el-form>
            </el-card>
            <div slot="footer" class="dialog-footer">
                <el-button @click="resetpwVisible = false">取 消</el-button>
                <el-button type="primary" @click='resetPwMethod'>提 交</el-button>
            </div>
        </el-dialog>


        <el-dialog :title='bind' :visible.sync="bindPhoneVisible">
            <el-card class="box-card">
                <el-form  ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="手机号码" prop="name">
                        <el-input :disabled="disabled" required='required' type='text' minlength='11' maxlength="11" show-word-limit v-model="bindPhoneF.phone"></el-input>
                    </el-form-item>

                    <el-form-item label="验证码" prop="name" >
                        <el-input  required='required' type='text' minlength='6' maxlength="6" show-word-limit v-model="bindPhoneF.code">
                            <el-button  @click="getCode" slot='append' type="text" :class="{'disabled-style':getCodeBtnDisable}" :disabled="getCodeBtnDisable">{{codeBtnWord}}</el-button>
<!--                            <el-button slot='append' :disabled='codeBDisabled' :loading='codeBLoading' @click='getCode' type='success' >{{ codeButtonShow }}</el-button>-->
                        </el-input>

                    </el-form-item>
                </el-form>
            </el-card>
            <div slot="footer" class="dialog-footer">
                <el-button @click="bindPhoneVisible = false">取 消</el-button>
                <el-button type="primary" @click='bindPhoneMethod'>提 交</el-button>
            </div>
        </el-dialog>


        <el-dialog title="修改头像" :visible.sync="editIconV">

            <el-card class="box-card">

                <el-upload action=""
                           :limit="1"
                           :on-exceed="exceedM"
                           :on-change="uploadImg"
                           :auto-upload="false" list-type="picture-card">
                    <i class="el-icon-plus"></i>
                </el-upload>
            </el-card>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editIconV = false">取 消</el-button>
                <el-button type="primary" @click='editIconMethod()'>提 交</el-button>
            </div>
        </el-dialog>


    </div>
</template>

<script>

export default {
    name: 'userCenter',
    data() {
        return {
            disabled: null,
            editIconV: false,
            iconUrl: '',
            dialogTitle1: '',
            dialogV1: false,
            codeBtnWord: '获取验证码', // 获取验证码按钮文字
            waitTime:61, // 获取验证码按钮失效时间
            bind:'',
            codeBDisabled: false,
            codeBLoading: false,
            codeButtonShow: '获取验证码',
            bindPhoneVisible: false,
            resetpwVisible: false,
            nicknameVisible: false,
            size:'',
            userInfo:'',
            nickname:'',
            resetpw:{
                beforePw:'',
                nowPw:''
            },
            bindPhoneF:{
                phone:'',
                code:''
            }

        }
    },
    created() {
        //获取用户信息系
        const _this = this;
        this.$http.get('dev-api/user/userInfo')
            .then(function(resp){
                _this.userInfo = resp.data.data;
            })
    },
    computed: {
        // 用于校验手机号码格式是否正确
        phoneNumberStyle(){
            let reg = /^1[3456789]\d{9}$/
            if(!reg.test(this.bindPhoneF.phone)){
                return false
            }
            return true
        },
        // 控制获取验证码按钮是否可点击
        getCodeBtnDisable:{
            get(){
                if(this.waitTime == 61){
                    if(this.bindPhoneF.phone){
                        return false
                    }
                    return true
                }
                return true
            },
            // 注意：因为计算属性本身没有set方法，不支持在方法中进行修改，而下面我要进行这个操作，所以需要手动添加
            set(){}
        }
    },
    methods: {

        getUserInfo(){
            //获取用户信息系
            const _this = this;
            this.$http.get('dev-api/user/userInfo')
                .then(function(resp){
                    _this.userInfo = resp.data.data;
                })
        },
        editNickname(){
            this.dialogTitle1 = '修改昵称';
            this.nickname = this.userInfo.nickname;
            this.dialogV1 = true;
            //this.nicknameVisible = true;
        },
        editIcon(){
            //this.dialogTitle1 = '修改头像'
            this.editIconV = true;
        },
        updateNickname(){
            const _this = this;
            _this.$http.put('dev-api/user/editNickname/'+_this.nickname)
                .then(function(resp){
                    if (resp.data.code === 0){
                        _this.$message({
                            type: 'success',
                            message: '修改成功!'
                        });
                        _this.dialogV1 = false;
                        //刷新数据
                        _this.getUserInfo();
                    }else{
                        _this.$message.error(resp.data.msg);
                    }

                })
            // if(this.dialogTitle1 === '修改昵称'){ //修改昵称
            //
            // }else{ //修改头像
            //     let form = {
            //         storeIcon: this.iconUrl
            //     }
            //     _this.$http.post('dev-api/user/editIcon',form)
            //         .then(function(resp){
            //             if (resp.data.code === 0){
            //                 _this.$message({
            //                     type: 'success',
            //                     message: '修改成功!'
            //                 });
            //                 localStorage.setItem('iconUrl',_this.iconUrl)
            //                 //刷新数据
            //                 _this.dialogV1 = false;
            //             }else{
            //                 _this.$message.error(resp.data.msg);
            //             }
            //
            //         })
            //
            // }

            },

        editpw(){
            this.resetpwVisible = true;
        },
        resetPwMethod(){
            const _this = this;
            _this.$http.post('dev-api/user/resetPw',_this.resetpw)
                .then(function(resp){
                    if (resp.data.code === 0){
                        _this.$message({
                            type: 'success',
                            message: '修改成功，新密码是'+_this.resetpw.nowPw
                        });
                        _this.resetpwVisible = false;

                    }else{
                        _this.$message.error(resp.data.msg);
                    }

                })
        },
        bindPhone(){
            if (this.userInfo.phone){
                this.$message.error("已绑定过手机号码")
                return false
            }
            this.disabled = false
            this.bindPhoneF.phone = ''
            this.bindPhoneF.code = ''
            this.bind = '绑定手机';
            this.bindPhoneVisible = true;
        },
        unbindPhone(){
            if (!this.userInfo.phone){
                this.$message.error("请先绑定手机号码")
                return false;
            }
            this.disabled = true
            this.bindPhoneF.phone = ''
            this.bindPhoneF.code = ''
            this.bindPhoneF.phone = this.userInfo.phone;
            this.bind = '解绑手机';
            this.bindPhoneVisible = true;

        },
        //绑定或解绑手机
        bindPhoneMethod(){
            const _this = this;
            if (_this.bind==='绑定手机'){
                _this.$http.post('dev-api/user/bindPhone',_this.bindPhoneF)
                    .then(function(resp){
                        if (resp.data.code === 0){
                            _this.$message({
                                type: 'success',
                                message: '绑定手机号码成功'
                            });
                            _this.userInfo.phone = _this.bindPhoneF.phone;
                            _this.bindPhoneVisible = false;

                        }else{
                            _this.$message.error(resp.data.msg);
                        }

                    })
            }else{ //解绑手机

                _this.$http.post('dev-api/user/unbindPhone',_this.bindPhoneF)
                    .then(function(resp){
                        if (resp.data.code === 0){
                            _this.$message({
                                type: 'success',
                                message: '解绑手机号码成功'
                            });
                            _this.userInfo.phone = null;
                            _this.bindPhoneVisible = false;

                        }else{
                            _this.$message.error(resp.data.msg);
                        }

                    })

            }




        },

        getCode(){
             const _this = this;

            if (this.phoneNumberStyle){

                //获取验证码
                _this.$http.get('dev-api/user/getCode/bind/'+_this.bindPhoneF.phone)
                    .then(function(resp){
                        if (resp.data.code === 0){
                            _this.$message({
                                type: 'success',
                                message: '获取验证码成功'
                            });

                        }else{
                            _this.$message.error(resp.data.msg);
                        }

                    })
            }else {
                this.$message.error("手机号格式错误")
                return false
            }


            // 因为下面用到了定时器，需要保存this指向
            let that = this
            that.waitTime--
            that.getCodeBtnDisable = true
            this.codeBtnWord = `${this.waitTime}s 后重新获取`
            let timer = setInterval(function(){
                if(that.waitTime>1){
                    that.waitTime--
                    that.codeBtnWord = `${that.waitTime}s 后重新获取`
                }else{
                    clearInterval(timer)
                    that.codeBtnWord = '获取验证码'
                    that.getCodeBtnDisable = false
                    that.waitTime = 61
                }
            },1000)
        },

        uploadImg(file, fileList) {
            const _this = this;
            //获取图片的类型
            let fileType = file.name.substring(file.name.lastIndexOf('.') + 1);
            if (fileType !== 'jpg' && fileType !== 'png' && fileType !== 'jpeg'){
                this.$message.error('头像格式不正确')
                return false;
            }
            //判断图片大小
            if (file.size/1024/1024 > 2){
                this.$message.error('头像大小不能大于2M')
                return false;
            }
            //使用js的FormData上传图片
            let formdata = new FormData()
            formdata.append("file", file.raw)
            //向服务器端发起请求
            this.$http.post('img-serve/img/upload',formdata)
                .then(function (resp) {
                    if (resp.data.code === 0){
                        _this.$message.success('上传成功')
                        _this.iconUrl = resp.data.data;
                        console.log(_this.iconUrl)
                    }else{
                        _this.$message.error('上传失败')
                    }
                })

        },
        editIconMethod(){
            const _this = this;
            let form = {
                storeIcon: this.iconUrl
            }

            this.$http.post('dev-api/user/editIcon',form)
                .then(function(resp){
                    if (resp.data.code === 0){
                        _this.$message.success('修改成功')
                        _this.editIconV = false
                        _this.getUserInfo()
                        localStorage.setItem('iconUrl',_this.iconUrl)
                    }else{
                        _this.$message.error(resp.data.msg)
                    }
                })
        },
        exceedM(files, fileList){
            this.$message.error('只能上传一张图片')
        }



    }
}
</script>

<style scoped>
.el-card {margin-bottom:15px;}
.activity-item {font-size: 13px;color: #999;display: flex;align-items: center;}
.activity-item label {color: #333;margin-right:10px;}
.activity-item .el-avatar {margin-right:10px;}
.activity-item .el-tag {margin-right:10px;}

.el-button.disabled-style {
    background-color: #EEEEEE;
    color: #CCCCCC;
}
</style>
